<template>
    <div class="content">
        <el-dialog :visible.sync="modifyBtnMsg.dialogFormVisible" title="银行卡信息" size="small" :before-close="handleClose" > 
            <div v-loading="loading">
                <div class="table">
                    <table class="dialogTable" align="center">
                        <tr>
                            <td>银行卡姓名</td>
                            <td>银行卡号</td>
                            <td>所属银行</td>
                            <td>所属支行</td>
                            <td>本次结算金额(元)</td>
                        </tr>
                        <tr>
                            <td>{{this.modifyBtnMsg.accountName}}</td>
                            <td>{{this.modifyBtnMsg.bankCard}}</td>
                            <td>
                              <span class="red" v-if="!this.modifyBtnMsg.bankName">银行卡信息已被用户删除</span>
                              <span v-else>{{this.modifyBtnMsg.bankName}}</span>
                            </td>
                            <td>
                              <span class="red" v-if="!this.modifyBtnMsg.subBankName">银行卡信息已被用户删除</span>
                              <span v-else>{{this.modifyBtnMsg.subBankName}}</span>
                            </td>
                            <td>{{this.modifyBtnMsg.money | moneySwitch}}</td>
                        </tr>
                    </table>
                </div>
                <div class="mr"></div>
                <footer>
                    <el-button @click="handleClose">关闭</el-button>
                </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'btnMsg',
    props: {
        modifyBtnMsg: {}
    },
    data() {
        return {
            loading: false,
            form: {},
            msgList: []
        };
    },
    methods: {
        handleClose() {
            this.modifyBtnMsg.dialogFormVisible = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.red{
  color: #ff4949
}
section,
footer {
  text-align: center;
}
.mr {
  margin-bottom: 30px;
}
.table{
    text-align: center
}
.title {
  position: relative;
  margin-bottom: 30px;
  font-size: 14px;
  padding-left: 20px;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
  }
}
section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
.cl-text {
  color: #000;
}
.dialogTable {
  text-align: center;
  display: inline-block;
//   margin: 30px auto;
  th,
  td {
    padding: 0 20px;
    text-align: center;
    border: solid 1px #ececec;
    height: 40px;
  }
  .cl-right {
    border-right: solid 1px transparent;
  }
//   tr td:nth-of-type(1) {
//     width: 120px;
//   }
//   tr td:nth-of-type(2) {
//     width: 100px;
//   }
  tr td:nth-of-type(3) {
    width: 150px;
  }
//   tr td:nth-of-type(4) {
//     width: 210px;
//   }
}
.cl-mony {
  color: #ff6600;
}
</style>
